<template>
  <div class="flex flex-col">
    <van-image lazy-load src="https://img01.yzcdn.cn/vant/cat.jpeg" height="200"/>
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh" style="height: calc(100vh - 100px);">
      <div>
        <p>刷新次数: {{ count }}</p>
      </div>
    </van-pull-refresh>
  </div>

</template>
<script setup lang="ts">
import {Toast} from 'vant';
import {reactive, toRefs} from 'vue';

const data = reactive({
  isLoading: false,
  count: 0
})
const {isLoading, count} = toRefs(data);
const onRefresh = () => {
  Toast('刷新成功');
  data.isLoading = false;
  data.count++;
}
</script>
<style lang="scss">
.doge {
  width: 140px;
  height: 72px;
  margin-top: 8px;
  border-radius: 4px;
}
</style>
